<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" inline @submit.native.prevent>
      <el-form-item>
        <auth-project class="auth-project" level="project" @selectProject="getProject" />
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="queryParams.inputYear" type="year" format="yyyy 年" value-format="yyyy" placeholder="选择年份" :clearable="false" :picker-options="datePickerOpts" style="width: 120px" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="handleQuery">刷新</el-button>
        <el-button type="primary" icon="el-icon-download" @click="handleExport" :loading="exportLoading" v-hasPermi="['system:post:export']">导出</el-button>
        <el-button type="primary" icon="el-icon-back" @click="showStats = false" v-if="showStats">返回</el-button>
      </el-form-item>
    </el-form>

    <ProjectBrief ref="ProjectBrief" :project-id="queryParams.projectId" />

    <div class="list-box">
      <transition name="summary">
        <MonthlySummary ref="MonthlySummary" :query-params="queryParams" :active="currMonth" v-show="!showStats" @change-month="toggleList" />
      </transition>
      <transition name="stats">
        <ScoreDetail ref="ScoreDetail" :query-params="queryParams" :active="currMonth" v-show="showStats" @change-month="toggleList" />
      </transition>
    </div>
  </div>
</template>
<script>
import { exportMothReport } from '@/api/qualityManage/cq'
import AuthProject from '../../qualityManage/components/AuthProject'
import ProjectBrief from './courseCheck/ProjectBrief'
import MonthlySummary from './courseCheck/MonthlySummary'
import ScoreDetail from './courseCheck/ScoreDetail'
export default {
  name: 'StatementCourseCheck',
  components: { AuthProject, MonthlySummary, ProjectBrief, ScoreDetail },
  data() {
    return {
      currentProject: {},
      datePickerOpts: { disabledDate: time => time.getTime() > Date.now() },
      queryParams: {
        projectId: '',
        inputYear: new Date().getFullYear() + ''
      },
      exportLoading: false,
      showStats: false,
      currMonth: ''
    }
  },
  watch: {
    'queryParams.inputYear'() {
      this.handleQuery()
    }
  },
  methods: {
    clearData() {
      this.$refs.ProjectBrief.reset()
      this.$refs.MonthlySummary.reset()
      this.$refs.ScoreDetail.reset()
    },
    assertQuery() {
      if (!this.queryParams.projectId) return void this.$message.warning('请选择项目')

      const year = +this.queryParams.inputYear || 0
      if (year < 1970 || year > new Date().getFullYear()) return void this.$message.warning('请选择合理年份')

      return true
    },
    handleQuery() {
      if (!this.assertQuery()) return this.clearData()

      this.$nextTick(() => {
        this.$refs.ProjectBrief.getInfo()
        this.$refs.MonthlySummary.getList()
        this.$refs.ScoreDetail.getList()
      })
    },
    getProject(project) {
      this.currentProject = project
      this.queryParams.projectId = project.id
      this.handleQuery()
    },
    async handleExport() {
      if (!this.assertQuery()) return

      const res1 = await this.$confirm('确定导出项目月度汇总表?', '警告', { type: 'warning' }).catch(() => false)
      if (res1 !== 'confirm') return

      this.exportLoading = true
      const res = await exportMothReport(this.queryParams).catch(() => false)
      this.exportLoading = false
      if (res === false) return

      const elink = document.createElement('a')
      elink.download = `项目管理情况月度汇总表_${this.currentProject.name}_${this.queryParams.inputYear}.xlsx`
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(new Blob([res]))
      elink.click()
    },
    toggleList(month) {
      this.showStats = !this.showStats
      this.currMonth = month
      setTimeout(() => {
        const el = document.querySelector('#stats' + month)
        el.scrollIntoView({ behavior: 'smooth' })
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background-color: #f8f8f8;
  height: 100%;
  padding-bottom: 0;
  overflow-y: auto;
}
.auth-project {
  width: 300px;
  zoom: 0.9;
  /deep/ .dept-projet-head .select-project {
    background-color: white;
  }
}
// 切换动画
.list-box {
  position: relative;
  width: 100%;
  min-height: calc(100% - 160px);
  overflow: hidden;
  padding: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
.summary-enter,
.summary-leave-active {
  opacity: 0;
  left: -100%;
}
.stats-enter-active {
  position: absolute;
  left: 100%;
}
.stats-enter-to {
  position: absolute;
  left: 10px;
}
.stats-leave-active {
  position: absolute;
  opacity: 0;
  left: 100%;
}
</style>
